<template>
    <div>
        <el-page-header @back="$router.go(-1)" content="工程页面">
        </el-page-header>
        <div class="top"
            style="margin-bottom: 10px; margin-top: 15px ;height: 40px;width: 100%;background-color: #ffe0cc;line-height: 40px;padding-left: 15px;">
            工程信息
        </div>
        <!-- 工程信息  -->
        <el-col :span="12">
            <el-form>
                <el-form-item style="padding-left: 10% ;" label="工程编号" align="center">{{ engDetails.serial_number }}
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="padding-left: 10% ;" label="工程类型" align="center">{{ engDetails.type }}
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="padding-left: 10% ;" label="开始时间" align="center">{{ engDetails.create_time }}
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="12">
            <el-form>
                <el-form-item style="padding-left: 10% ;" label="工程名称" align="center">{{ engDetails.name }}
                </el-form-item>
            </el-form>
            <el-form>

                <el-form-item style="padding-left: 10% ;" label="工程状态" align="center">{{ engDetails.status }}
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="padding-left: 10% ;" label="结束时间" align="center">{{ engDetails.end_time }}
                </el-form-item>
            </el-form>
        </el-col>
        <el-form>
            <el-form-item style="padding-left: 5% ;" label="地址" align="center">{{ engDetails.address }}</el-form-item>
        </el-form>
        <el-form>
            <el-form-item style="padding-left: 5% ;" label="工程负责人" align="center">{{ engDetails.type }}</el-form-item>
        </el-form>

        <div class="top"
            style="margin-bottom: 10px; margin-top: 30px ;height: 40px;width: 100%;background-color: #ffe0cc;line-height: 40px;padding-left: 15px;">
            <el-col :span="18"> 绑定信息</el-col>
            <el-col :span="6" style="text-align: right;">
                <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
                    绑定
                </el-button>

            </el-col>
        </div>

        <el-table :data="EngDevData" style="width: 100%">
            <el-table-column type="index" :index="1" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="serial_number" label="设备编号" width="180">
            </el-table-column>
            <el-table-column prop="longitude" label="经度">
            </el-table-column>
            <el-table-column prop="latitude" label="纬度">
            </el-table-column>
            <el-table-column prop="video" label="视频流">
            </el-table-column>
            <el-table-column prop="online_status" label="在线状态">
                <template v-slot="scope">
                    <div>
                        <el-tag :type="scope.row.online_status == '1' ? 'success' : 'danger'">{{
                            scope.row.online_status == '1' ? '在线' : '离线' }}
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <div>
                        <el-link @click="toUnBind(scope.row.id)" style="margin-right: 10px;" :underline="false"
                            type="success">解绑</el-link>
                        <el-link v-if='scope.row.online_status == 0' @click="toOpen(scope.row.id)" :underline="false"
                            type="warning">上线</el-link>
                        <el-link v-else @click="toClose(scope.row.id)" :underline="false" type="warning">下线</el-link>
                    </div>
                </template>
            </el-table-column>

        </el-table>
        <el-drawer @close="reset" size="50%" :title="title" :visible.sync="drawer" direction="rtl"
            custom-class="demo-drawer" ref="drawer">
            <div class="demo-drawer__content" style="padding-right: 10px;">
                <el-form :rules="rules" ref="myForm" :model="formSave">
                    <el-row>
                        <span>
                            <div class="top"
                                style="margin-bottom: 10px; margin-top: 15px ;height: 40px;width: 100%;background-color: #f4f4f4;line-height: 40px;padding-left: 15px;">
                                1.选择设备
                            </div>
                        </span>
                        <el-form-item prop="device_id" label="设备" :label-width="formLabelWidth">
                            <el-select v-model="formSave.device_id" clearable placeholder="Select">
                                <el-option v-for="item in emptyDev" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-row>
                </el-form>
                <el-form :rules="rules" ref="myForm" :model="formSave">
                    <el-row>
                        <div class="top"
                            style="margin-bottom: 10px; margin-top: 15px ;height: 40px;width: 100%;background-color:  #f4f4f4;line-height: 40px;padding-left: 15px;">
                            2.配置设备
                        </div>
                        <el-form-item prop="longitude" label="经度" :label-width="formLabelWidth">
                            <el-input clearable class="input" v-model="formSave.longitude"
                                autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item prop="latitude" label="纬度" :label-width="formLabelWidth">
                            <el-input clearable class="input" v-model="formSave.latitude" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item prop="video" label="视频流" :label-width="formLabelWidth">
                            <el-input clearable class="input" v-model="formSave.video" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-row>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="visible = false">取 消</el-button>
                    <el-button type="primary" @click="toSubmit">确定</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { get, del, post, postJSON } from '@/utils/request'
import moment from 'moment'
// 引入省市区数据
import pca from '@/assets/pca.json'
import _ from 'lodash';

export default {
    data() {
        return {
            formSave: {},
            EngDevData: [],
            title: '绑定设备',
            // 控制抽屉显示与隐藏 
            visible: false,
            drawer: false,
            engDetails: {},
            formLabelWidth: '120px',
            EngData: [],
            emptyDev: [],
            params: {
                page: 1,
                pageSize: 10
            },
            rules: {
                device_id: [
                    { required: true, message: '设备', trigger: "change" },
                ],
                latitude: [
                    { required: true, message: '经度', trigger: "change" },
                ],
                longitude: [
                    { required: true, message: '纬度', trigger: "change" },
                ],
                video: [
                    { required: true, message: '视频流', trigger: "change" }

                ],

            }

        }
    },
    methods: {
        toUnBind(id) {
            this.$confirm('设备解绑后将自动下线，并且产生拆机工单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let temp = {};
                temp.engineer_id = this.params.engineer_id;
                temp.device_id = id;
                // 点了确定按钮 发起删除工程请求 
                let res = await get('/engineer/unbindDevice', temp);
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                // 从第一页重新载入数据 
                this.params.page = 1;
                // 重新载入数据 
                this.getTableData();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        toOpen(id) {
            this.$confirm('设备上线后将启用采集数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 点了确定按钮 发起删除工程请求 
                let res = await get('/device/openDevice', { id });
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                // 从第一页重新载入数据 
                this.params.page = 1;
                // 重新载入数据 
                this.getTableData();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        toClose(id) {
            this.$confirm('设备下线后将无法启用采集数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 点了确定按钮 发起删除工程请求 
                let res = await get('/device/closeDevice', { id });
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                // 从第一页重新载入数据 
                this.params.page = 1;
                // 重新载入数据 
                this.getTableData();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        toSubmit() {
            this.$refs['myForm'].validate(async (valid) => {
                if (valid) {
                    this.formSave.engineer_id = this.params.engineer_id;
                    let res = await get('/engineer/bindService', this.formSave);
                    if (res.status == 200) {
                        this.$notify({
                            title: "成功",
                            message: res.message,
                            type: 'success'
                        });
                        this.drawer = false;
                        // 重新查询数据
                        this.getTableData();
                    } else {
                        return false;
                    }
                } else {
                    // 表单校验失败
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async getEngData() {
            let res = await get('/engineer/findEngineerDeviceTree');
            this.EngData = res.data;
        },

        reset() {
            this.$refs['myForm'].resetFields();
        },
        async getTableData() {
            let res = await get('/device/pageQuery', this.params);
            this.EngDevData = res.data.list;
            this.total = res.data.total;
        },
        async findEmptyDev() {
            let res = await get("/device/pageQuery", { page: 1, pageSize: 1000, bind_status: 0 });
            console.log(res, '6');
            this.emptyDev = res.data.list;
        }

    },
    created() {
        this.findEmptyDev();
        this.getTableData();
        this.getEngData();
        // 接受路由跳转传递的参数 this.$route.query
        this.engDetails = this.$route.query;
        this.params.engineer_id = this.$route.query.id;
    }
}
</script>
<style lang="scss" scoped>
// vue2深度选择器   
::v-deep .el-link--inner {
    margin-left: 5px;
}

.input {
    width: 280px;
}

.select {
    width: 280px;
}

.demo-drawer__footer {
    border-top: 1px solid #ececec;
    padding-top: 10px;
    position: fixed;
    bottom: 50px;
    width: 50%;
    text-align: center;
}
</style>